// import React...
import React from 'react';
import Handsontable from 'handsontable';
import { Sheet, dataType } from './Sheet';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [
      { name: '商品名称', type: dataType.text, min: 1, max: 20, required: true, readOnly: true, width: 200 },
      { name: '规格类别', type: dataType.dropdown, min: 1, max: 20, required: true, source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'], },
      { name: '规格名称', type: dataType.text, min: 1, max: 20, required: true, },
      // {
      //   name: '出成率(%)', descrbe: '(若不填，则默认100)', type: dataType.numeric, min: 0, max: 100, format: '0.00', renderer: (instance, td, row, col, prop, value, cellProperties) => {
      //     const args = [instance, td, row, col, prop, value ? `${value}%` : null, cellProperties];
      //     Handsontable.renderers.NumericRenderer.apply(this, args);
      //   }
      // },
      {
        name: '出成率(%)', descrbe: '(若不填，则默认100)', type: dataType.numeric, min: 0, max: 100, format: '0.00'
      },
      { name: '条形码', type: dataType.text, min: 1, max: 20, },
      { name: '售卖价', type: dataType.numeric, min: 1, max: 20, required: true, },
      { name: '默认结算价', type: dataType.numeric, min: 0, max: 999, required: true, },
      { name: '标准单位名称', type: dataType.text, min: 1, max: 20, required: true, },
      { name: '标准单位换算率', type: dataType.numeric, min: 0, max: 99, required: true, },
      { name: '最小单位', type: dataType.text, min: 1, max: 20, required: true, },
      { name: '最小单位', type: dataType.checkbox, min: 1, max: 20, required: true, },
      { name: '导入时间', type: dataType.date, min: 1, max: 20, required: true, dateFormat: 'YYYY/MM/DD', correctFormat: true },
    ];
    this.data = [
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
      ['name'],
    ];
  }

  handlerClick = () => {
    window.setTimeout(() => {
      this.sheet.validateCells();
      console.log(this.sheet.getData());
    }, 1);
  }

  beforeChange = (changes, values) => {
    console.log(changes, values);
  }
  afterChange = (changes, values) => {
    console.log(changes, values);
  }

  render() {
    return (
      <div id="example-component">
        <button onClick={this.handlerClick}>保存</button>
        <Sheet
          ref={sheet => (this.sheet = sheet)}
          columns={this.columns}
          datas={this.data}
          beforeChange={this.beforeChange}
          afterChange={this.afterChange}
          autoAddRow
          contextMenu={[{ key: 'row_above', name: '在上面新增行' }, 'row_below', 'remove_row', '---------', 'undo', 'redo']}
        />
      </div>
    );
  }
}

export default Example;
